<template>
  <div class="p-4 mx-auto max-w-2xl">
    <h2 class="mb-4 text-xl font-bold">摸鱼倒计时/进度条</h2>
    
    <!-- 今日摸鱼进度 -->
    <div class="mb-6">
      <h3 class="mb-2 font-bold">今日工作进度</h3>
      <div class="p-3 mb-2 rounded-lg border">
        <div class="flex justify-between mb-1 text-sm">
          <span>已经完成 {{ todayProgress.percentage }}%</span>
          <span>{{ todayProgress.remaining }}</span>
        </div>
        <div class="w-full h-3 bg-gray-200 rounded-full">
          <div 
            class="h-3 bg-green-500 rounded-full" 
            :style="{ width: `${todayProgress.percentage}%` }"></div>
        </div>
      </div>
      <div class="text-sm text-gray-500">
        今天是 {{ todayInfo.date }}，{{ todayInfo.weekday }}
      </div>
    </div>
    
    <!-- 本周摸鱼进度 -->
    <div class="mb-6">
      <h3 class="mb-2 font-bold">本周工作进度</h3>
      <div class="p-3 mb-2 rounded-lg border">
        <div class="flex justify-between mb-1 text-sm">
          <span>已经完成 {{ weekProgress.percentage }}%</span>
          <span>{{ weekProgress.remaining }}</span>
        </div>
        <div class="w-full h-3 bg-gray-200 rounded-full">
          <div 
            class="h-3 bg-blue-500 rounded-full" 
            :style="{ width: `${weekProgress.percentage}%` }"></div>
        </div>
      </div>
    </div>
    
    <!-- 月度摸鱼进度 -->
    <div class="mb-6">
      <h3 class="mb-2 font-bold">本月工作进度</h3>
      <div class="p-3 mb-2 rounded-lg border">
        <div class="flex justify-between mb-1 text-sm">
          <span>已经完成 {{ monthProgress.percentage }}%</span>
          <span>{{ monthProgress.remaining }}</span>
        </div>
        <div class="w-full h-3 bg-gray-200 rounded-full">
          <div 
            class="h-3 bg-purple-500 rounded-full" 
            :style="{ width: `${monthProgress.percentage}%` }"></div>
        </div>
      </div>
    </div>
    
    <!-- 年度摸鱼进度 -->
    <div class="mb-6">
      <h3 class="mb-2 font-bold">本年工作进度</h3>
      <div class="p-3 mb-2 rounded-lg border">
        <div class="flex justify-between mb-1 text-sm">
          <span>已经完成 {{ yearProgress.percentage }}%</span>
          <span>{{ yearProgress.remaining }}</span>
        </div>
        <div class="w-full h-3 bg-gray-200 rounded-full">
          <div 
            class="h-3 bg-red-500 rounded-full" 
            :style="{ width: `${yearProgress.percentage}%` }"></div>
        </div>
      </div>
    </div>
    
    <!-- 重要节日倒计时 -->
    <div>
      <h3 class="mb-2 font-bold">节假日倒计时</h3>
      <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <div 
          v-for="(holiday, index) in holidays" 
          :key="index"
          class="p-3 rounded-lg border">
          <div class="font-bold">{{ holiday.name }}</div>
          <div class="font-mono text-xl">{{ holiday.days }} 天</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

// 进度条数据
const todayProgress = ref({ percentage: 0, remaining: '' })
const weekProgress = ref({ percentage: 0, remaining: '' })
const monthProgress = ref({ percentage: 0, remaining: '' })
const yearProgress = ref({ percentage: 0, remaining: '' })
const todayInfo = ref({ date: '', weekday: '' })
const holidays = ref([])

// 定时器
let timer

// 计算工作日进度 (假设工作时间是早上9点到下午6点)
function calculateDayProgress() {
  const now = new Date()
  const startWork = new Date(now)
  startWork.setHours(9, 0, 0, 0)
  
  const endWork = new Date(now)
  endWork.setHours(18, 0, 0, 0)
  
  // 如果还没到上班时间
  if (now < startWork) {
    todayProgress.value.percentage = 0
    todayProgress.value.remaining = '还未开始工作'
    return
  }
  
  // 如果已经下班
  if (now > endWork) {
    todayProgress.value.percentage = 100
    todayProgress.value.remaining = '今日工作已结束'
    return
  }
  
  const totalWorkMs = endWork - startWork
  const workedMs = now - startWork
  const percentage = Math.floor((workedMs / totalWorkMs) * 100)
  
  const remainingMs = endWork - now
  const remainingHours = Math.floor(remainingMs / (1000 * 60 * 60))
  const remainingMinutes = Math.floor((remainingMs % (1000 * 60 * 60)) / (1000 * 60))
  
  todayProgress.value.percentage = percentage
  todayProgress.value.remaining = `还剩 ${remainingHours}小时${remainingMinutes}分钟`
}

// 计算周进度
function calculateWeekProgress() {
  const now = new Date()
  const day = now.getDay() || 7 // 转换周日的0为7
  const totalDays = 5 // 假设工作日是周一到周五
  
  // 如果是周末
  if (day > 5) {
    weekProgress.value.percentage = 100
    weekProgress.value.remaining = '本周工作已结束'
    return
  }
  
  const dayPercentage = calculateDayProgress()
  const weekPercentage = Math.floor(((day - 1) * 100 + todayProgress.value.percentage) / totalDays)
  const daysLeft = totalDays - day
  
  weekProgress.value.percentage = weekPercentage
  weekProgress.value.remaining = daysLeft === 0 ? 
    '今天是本周最后一个工作日' : 
    `还剩 ${daysLeft} 个工作日`
}

// 计算月进度
function calculateMonthProgress() {
  const now = new Date()
  const totalDays = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate()
  const currentDay = now.getDate()
  const percentage = Math.floor((currentDay / totalDays) * 100)
  
  monthProgress.value.percentage = percentage
  monthProgress.value.remaining = `还剩 ${totalDays - currentDay} 天`
}

// 计算年进度
function calculateYearProgress() {
  const now = new Date()
  const startOfYear = new Date(now.getFullYear(), 0, 1)
  const endOfYear = new Date(now.getFullYear() + 1, 0, 1)
  
  const totalMs = endOfYear - startOfYear
  const elapsedMs = now - startOfYear
  const percentage = Math.floor((elapsedMs / totalMs) * 100)
  
  const remainingDays = Math.ceil((endOfYear - now) / (1000 * 60 * 60 * 24))
  
  yearProgress.value.percentage = percentage
  yearProgress.value.remaining = `还剩 ${remainingDays} 天`
}

// 设置今日日期信息
function setTodayInfo() {
  const now = new Date()
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  
  todayInfo.value.date = now.toLocaleDateString('zh-CN')
  todayInfo.value.weekday = weekdays[now.getDay()]
}

// 计算节假日倒计时
function calculateHolidays() {
  const now = new Date()
  const currentYear = now.getFullYear()
  const nextYear = currentYear + 1
  
  // 定义一些常见节假日（每年的固定日期）
  const holidayDates = [
    { name: '元旦', date: new Date(nextYear, 0, 1) },
    { name: '春节', date: new Date(currentYear, 1, 10) }, // 仅为示例，实际春节日期每年不同
    { name: '清明节', date: new Date(currentYear, 3, 5) },
    { name: '劳动节', date: new Date(currentYear, 4, 1) },
    { name: '端午节', date: new Date(currentYear, 5, 22) }, // 仅为示例，实际端午日期每年不同
    { name: '中秋节', date: new Date(currentYear, 8, 15) }, // 仅为示例，实际中秋日期每年不同
    { name: '国庆节', date: new Date(currentYear, 9, 1) },
    { name: '元旦', date: new Date(currentYear, 0, 1) }
  ]
  
  // 计算每个节假日距今的天数
  const upcomingHolidays = holidayDates
    .map(holiday => {
      const holidayDate = holiday.date
      // 如果今年的节日已经过去，则使用明年的日期
      if (holidayDate < now) {
        holidayDate.setFullYear(nextYear)
      }
      
      const daysLeft = Math.ceil((holidayDate - now) / (1000 * 60 * 60 * 24))
      return {
        name: holiday.name,
        days: daysLeft
      }
    })
    // 按照剩余天数排序
    .sort((a, b) => a.days - b.days)
    // 只保留最近的4个节假日
    .slice(0, 4)
  
  holidays.value = upcomingHolidays
}

// 更新所有进度
function updateAllProgress() {
  calculateDayProgress()
  calculateWeekProgress()
  calculateMonthProgress()
  calculateYearProgress()
  setTodayInfo()
}

// 组件加载时设置定时器，每分钟更新一次
onMounted(() => {
  updateAllProgress()
  calculateHolidays()
  
  // 先立即更新一次，然后设置定时器
  timer = setInterval(() => {
    updateAllProgress()
  }, 60000) // 每分钟更新一次
})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script> 